<template>
	<el-tabs type="border-card">
		<el-tab-pane label="学生管理">
			<el-form :inline="true" ref="addForm" :model="searchParam" class="fl">
				<el-form-item label="姓名">
					<el-input v-model="searchParam.stuName" placeholder="姓名"></el-input>
				</el-form-item>
				<el-form-item label="学校">
					<el-select v-model="searchParam.schoolCode" placeholder="活动区域">
						<el-option label="---" value=""></el-option>
						<el-option v-for="item in scllist" :label="item.schoolname" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="性别">
					<el-select v-model="searchParam.sexCode" placeholder="活动区域">
						<el-option label="---" value=""></el-option>
						<el-option v-for="item in sexlist" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit(1)">查询</el-button>
				</el-form-item>
			</el-form>
			<div class="fl" style="margin-top: -10px;margin-bottom: 10px;">
				<el-button size="medium" type="success" @click="addFormVisible = true">增加</el-button>
			</div>
			<el-table :data="result.list" border>
				<el-table-column type="index" label="序号" width="150"></el-table-column>
				<el-table-column prop="stucode" label="学号" width="150"></el-table-column>
				<el-table-column prop="stuname" label="姓名" width="150"></el-table-column>
				<el-table-column prop="schoolname" label="学校" width="150"></el-table-column>
				<el-table-column prop="stuage" label="年龄" width="150"></el-table-column>
				<el-table-column prop="stubrithday" label="生日" width="150"></el-table-column>
				<el-table-column prop="name" label="性别" width="150"></el-table-column>
				<el-table-column label="操作" width="100" align="center">
					<template #default="scope">
						<el-row>
							<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
							</el-button>
						</el-row>
					</template>
				</el-table-column>
			</el-table>
			<div class="block">
				<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange"
					:page-size="searchParam.onePageCount" :total="result.total">
				</el-pagination>
			</div>
		</el-tab-pane>
	</el-tabs>
	<el-dialog v-model="addFormVisible" title="增加学生">
		<el-form :model="addform" :rules="rules" class="fl">
			<el-form-item label="姓名" prop="stuname">
				<el-input v-model="addform.stuname" placeholder="姓名" />
			</el-form-item>
			<el-form-item label="学校" prop="stuschid">
				<el-select v-model="addform.stuschid" placeholder="活动区域">
					<el-option label="---" value=""></el-option>
					<el-option v-for="item in scllist" :label="item.schoolname" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="年龄" prop="stuage">
				<el-input v-model="addform.stuage" placeholder="年龄" />
			</el-form-item>
			<el-form-item label="出生日期" prop="stubrithday">
				<el-date-picker v-model="addform.stubrithday" type="date" placeholder="选择日期" :size="size" />
			</el-form-item>
			<el-form-item label="性别" prop="codenameid">
				<el-select v-model="addform.codenameid" placeholder="活动区域">
					<el-option label="---" value=""></el-option>
					<el-option v-for="item in sexlist" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click="addStudent()" :loading="loadingbut">{{ loadingbuttext }}</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script>
//import axios from "axios"
export default {
	data() {
		return {
			searchParam: {
				stuName: "",
				schoolCode: "",
				sexCode: "",
				currentpage: 1,
				onePageCount: 5
			},
			sexlist: [],
			scllist: [],
			result: [],
			addFormVisible: false,
			addform: {},
			rules: {
				stuname: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
				stuschid: [{ required: true, message: '请选择部门类型', trigger: 'change' }],
				stuage: [{ required: true, message: '请选择部门类型', trigger: 'blur' }],
				stubrithday: [{ required: true, message: '请选择部门类型', trigger: 'change' }],
				codenameid: [{ required: true, message: '请选择部门类型', trigger: 'change' }]
			},
			loadingbut: false,
			loadingbuttext: '新增'
		}
	},
	methods: {
		addStudent() {
			this.$refs['addForm'].validate((valid) => {
				if (valid) {
					this.loadingbut = true;
					this.loadingbuttext = '添加中...';
					this.$axios.post(
						'/api/bstudent/add',
						this.addform,
						{
							headers: {
								'Authorization': sessionStorage.getItem('authtoken')
							}
						}
					)//直接提交表单
						.then(successResponse => {
							if (successResponse.data.msgId === "A006") {
								alert('添加成功')
								//this.$router.replace({path: '/department'})
								this.addFormVisible = false,
									this.loadingbut = false;
								this.loadingbuttext = '新增'
								this.$router.replace({ path: '/home' })
								//this.onSubmit(1)
							} else {
								alert(res.data.msgId)
								this.loadingbut = false;
								this.loadingbuttext = '新增';
							}
						})
						.catch(failResponse => {
							alert(failResponse.response.status)
						})
				}
				else {
					this.$alert('表单验证失败', { confirmButtonText: '确定' })
					return false;
				}
			})
		},
		onSubmit(currentpage) {
			const loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			this.searchParam.currentpage = currentpage;
			//axios.post("http://localhost:8000/mystu/api/bstudent/getstudentpagerlist", {
			this.$axios.post("/api/bstudent/getstudentpagerlist", {
				"stuName": this.searchParam.stuName,
				"schId": this.searchParam.schoolCode,
				"sexCode": this.searchParam.sexCode,
				"pageNum": this.searchParam.currentpage,
				"pageSize": this.searchParam.onePageCount
			}, {
				headers: {
					'Authorization': sessionStorage.getItem('authtoken')
				}
			})
				.then(res => {
					this.result = res.data.result;
					loading.close();
				})
				.catch(error => {
					console.log(error)
					loading.close();
				});
		},
		handleDelete(index, row) {
			alert(index)
			console.log(row)
		},
		handleCurrentChange(val) {
			this.onSubmit(val)
		}
	},
	mounted() {
		//axios.post("http://localhost:8000/mystu/api/bcodename/getcodelist", {
		this.$axios.post("/api/bcodename/getcodelist", {
			"codeid": "001"
		})
			.then(res => {
				this.sexlist = res.data.result;
			})
			.catch(error => {
				console.log(error);
			});

		//axios.post("http://localhost:8000/mystu/api/bschool/getallscllist")
		this.$axios.post("/api/bschool/getallscllist")
			.then(res => {
				this.scllist = res.data.result;
			})
			.catch(error => {
				console.log(error);
			});
	}
}
</script>

<style lang="scss">
.fr {
	float: right;
}

.fl {
	text-align: left;
}
</style>
